<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>1
        <h2>标题</h2>3
        <a href="#">超链接</a>4
        <p>段落</p>6
        <span>特殊文本</span>
        <h4>4号标题</h4>
        <strong>强调加粗</strong>
        <ul>
            <li>列表1</li>
            <li>列表2</li>
            <li>列表3</li>
        </ul>   
    </div>

    <script>
        var div = document.querySelector("div");
        // 节点关系
            // 识别空白节点
                // 获取所有子节点   childNodes
                var allChilds = div.childNodes;
                console.log(allChilds , allChilds.length)
                // 第一个子节点   firstChild
                // 最后一个子节点   lastChild
                var firstC = div.firstChild;
                console.log(firstC)
                // 下一个子节点   nextSibling
                // 上一个子节点   previousSibling
                var h2Child = div.firstChild.nextSibling;
                console.log(h2Child)

            // 不识别空白节点   
                // 获取所有元素子节点  children
                var childs = div.children;
                console.log(childs , childs.length)
                // 第一个 元素 子节点   firstElementChild
                // 最后一个 元素 子节点   lastElementChild
                var firstEl = div.firstElementChild;
                console.log(firstEl)
                // 下一个 元素 子节点   nextElementSibling
                // 上一个 元素 子节点   previousElementSibling
                var aEl = div.firstElementChild.nextElementSibling;
                console.log(aEl)

                // 父节点 parentNode
                console.log( div.parentNode.parentElement.parentNode.parentNode )
    </script>
</body>
</html>